<template>
  <div>
    <ul>
      <li v-for="(item, index) in tabs" :key="index" @click="tabButton(index)" :class="{ active: activeIndex === index }">
        {{ item }}</li>
    </ul>
    <div v-for="(item, index) in tabsContent" :key="index"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabs: ['买入', '卖出', '撤单', '委托'],
      tabsContent: ['tab1', 'tab2', 'tab3', 'tab4'],
      activeIndex: 0
    }
  },
  methods: {
    tabButton (index) {
      this.activeIndex = index
    }
  }

}
</script>

<style scoped>
ul {
  list-style-type: none;
  display: flex;
}

li {
  padding: 10px;
  border: 1px solid #000;
}

.active {
  background-color: #309fea;
}
</style>
